<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>modal-demo</title>
    <script type="text/javascript" src="./modal.js"></script>
    <script type="text/javascript" src="./index.js"></script>
    <style type="text/css">
        button {
            float: right;
            margin: 0 0.5rem
        }

        p {
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translate(-50%)
        }
    </style>
</head>

<body>
    <button id="modal-login">登录</button>
    <button id="modal-register">注册</button>
    <!--登录弹窗-->
    <div class="dialog-login">
        <header>
            <h2 class="title">登录</h2>
        </header>
        <content>
            <div class="input-group">
                <label for="userName">用户名:</label>
                <input type="text" value="请输入用户名" id="userName">
                <span class="msg"></span>
            </div>
            <div class="input-group">
                <label for="userPassword">密&emsp;码:</label>
                <input type="text" value="请输入密码" id="userPassword">
                <span class="msg"></span>
            </div>
        </content>
        <footer>
            <div>
                <p class="target-to-register">没有账号？点击注册</p>
            </div>
            <div>
                <button class="submit">提交</button>
                <button class="closed">关闭</button>
            </div>
        </footer>
    </div>
    <!--登录弹窗-->
    <!--注册弹窗-->
    <div class="dialog-register">
        <header>
            <h2 class="title">注册</h2>
        </header>
        <content>
            <div class="input-group">
                <label for="userName">用&ensp;户&ensp;名:</label>
                <input type="text" value="6~15位字母或数字" />
                <span class="msg"></span>
            </div>
            <div class="input-group">
                <label for="userPassword">密&emsp;&emsp;码:</label>
                <input type="text" value="至少6位字母或数字">
                <span class="msg"></span>
            </div>
            <div class="input-group">
                <label for="userRePassword">确认密码:</label>
                <input type="text" value="至少6位字母或数字" id="userRePassword">
                <span class="msg"></span>
            </div>
            <div class="input-group">
                <label for="userPhone">手机号码:</label>
                <input type="text" value="例如：136XXXXXXXX" id="userPhone">
                <span class="msg"></span>
            </div>
            <div class="input-group">
                <label for="userEmail">电子邮箱:</label>
                <input type="text" value="例如：123@123.com" id="userEmail">
                <span class="msg"></span>
            </div>
        </content>
        <footer>
            <div>
                <p class="target-to-login">已有账号？点击登录</p>
            </div>
            <div>
                <button class="submit">提交</button>
                <button class="closed">关闭</button>
            </div>
        </footer>
    </div>
    <!--注册弹窗-->

    <p>注册、登录modal弹窗demo</p>
</body>

</html>